<template>
  <div>
    <a-spin :spinning="spinning != 0">
      <div :style="{ padding: '0 0 32px 32px', height: '400px' }">
        <div :id="canvasId" v-show="show"></div>
      </div>

    </a-spin>
    <AssigneeAvgDuetimeTopDialog  ref="dialog" :beginDate="beginDate" :endDate="endDate" :groupIds="groupIds"></AssigneeAvgDuetimeTopDialog>

  </div>

</template>

<script>

  import { Bar } from '@antv/g2plot'
  import YchConstant from "@/api/YchConstant";
  import {getAction} from '@/api/manage'
  import AssigneeAvgDuetimeTopDialog from './AssigneeAvgDuetimeTopDialog'

  let bar;
  export default {
    name:'AssigneeAvgDuetimeTop',
    components:{
      AssigneeAvgDuetimeTopDialog
    },
    props: {
      beginDate: {
        type: String,
        required: false
      },
      endDate: {
        type: String,
        required: false
      },
      groupIds:{
        type: String,
        required: false
      }
    },
    data () {
      return {
        show:true,
        spinning: 0,//遮罩
        canvasId: Math.random().toString(36).slice(-8),
        data:[],
        url:{
          list:YchConstant.PREFIX_BPM + '/analyze/processAnalyzeRest/getAssigneeAvgDuetimeTop/v1',
        },
      }
    },
    methods: {
      render () {
        let that = this
        this.show = true
        const data = this.data;
        bar = new Bar(this.canvasId, {
          title: {
            visible: true,
            text: this.$t('m.bpm.analyze.dueTimeTaskTop'),
          },
          data,
          xField: 'count',
          xAxis:{
            visible: true,
            line: {
              visible: true,
            },
            title: {
              visible: true,
            },
            label: {
              visible: false,
            },
            tickLine: {
              visible: true,
            },
            grid: {
              visible: true,
            },
            tickCount:10,
          },
          yField: 'name',
          seriesField: 'name',
          legend: {
            visible: true,
            position: 'right-center',
          },
          /*color:['red','orange','yellow','green','blue','indigo','purple','cyan','magenta','pink'],
          colorField:'name',*/
          label: {
            visible: true,
            formatter: (t) => {
              if(t==null){
                return ''
              }
              let timeStr;
              let d = 24*60*60
              let h = 60*60
              let m = 60
              let s = 1
              let d1 = Math.floor(t/d)
              let h1 = Math.floor((t%d)/h)
              let m1 = Math.floor((t%h)/m)
              let s1 = Math.floor((t%m)/s)
              if(d1>0){
                timeStr = d1+this.$t('m.common.label.days')+h1+this.$t('m.common.label.hours')+m1+this.$t('m.common.label.minutes')+s1+this.$t('m.common.label.seconds')
              }else if(h1>0){
                timeStr = h1+this.$t('m.common.label.hours')+m1+this.$t('m.common.label.minutes')+s1+this.$t('m.common.label.seconds')
              }else if(m1>0){
                timeStr = m1+this.$t('m.common.label.minutes')+s1+this.$t('m.common.label.seconds')
              }else{
                timeStr = s1+this.$t('m.common.label.seconds')
              }
              return timeStr
            },
          },
          meta:{
            count:{
              alias:this.$t('m.bpm.analyze.dueTime')
            }
          },
          events:{
            onBarClick:function(args){
              that.$refs.dialog.loadData(args.data.id)
            },
          },
        });
        bar.render();
      },
      update(){
        if(this.data && this.data.length>0){
          this.show = true
          if(bar){
            bar.changeData(this.data)
          }else{
            this.render()
          }

        }else{
          this.show = false
        }

      },
      queryData(update){
        this.spinning++;
        let params = {
          beginDate:this.beginDate,
          endDate:this.endDate,
          groupIds:this.groupIds
        }
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.data = res.result
            if(update=='1'){
              this.update()
            }else{
              this.render()
            }
          } else {
            this.messageUtil.warning(res.message);
          }
        }).finally(() => {
          this.spinning--;
        });

      },
    },
    mounted () {
      this.queryData()
    },
  }
</script>
